<template>
  <div class="form-date-content">
    <!-- start 日期选择器 -->
    <bbx-timezone-time-picker
      v-bind="$attrs"
      :id="`form_${field.fieldName}`"
      :value="bindTime"
      :is-edit="true"
      :type="dateObj.type"
      :format="dateObj.format"
      :field="field"
      value-format="timestamp"
      :editable="false"
      :clearable="clearable"
      :placeholder="isReadonly ? relationPlaceholder : placeholder"
      :picker-options="datePickerOption"
      :disabled="disabled || nativeDisabled"
      :readonly="isReadonly"
      :pickerPopperClass="formDatePickerClassName"
      @input="handleInput"
      @confirm="handleConfirm"
      @nativeChange="$emit('nativeChange', $event)"
    >
    </bbx-timezone-time-picker>
    <!-- end 日期选择器 -->
  </div>
</template>

<script>
import { defineComponent, toRefs, ref, unref, computed, watchEffect } from 'vue';
/* component */
import BbxTimezoneTimePicker from '@src/component/Bbx/TimezoneTimePicker'
import FormTime from '@src/component/form/components/FormDate/FormTime';
/* utils */
import { getTimestamp } from 'pub-bbx-utils';
/* mixins */
import FormMixin from '@src/component/form/mixin/form'
/* option */
import pickerOption from './pickerOption';

export default defineComponent({
  name: 'FormDate',
  components: {
    BbxTimezoneTimePicker,
    FormTime
  },
  mixins: [
    FormMixin
  ],
  emits: ['update', 'input'],
  props: {
    nativeDisabled: {
      type: Boolean,
      default: false,
    },
    disabledDate: {
      type: Function,
    },
    value: {
      type: [String, Number],
      default: null,
    },
    isReadonly: {
      type: Boolean,
      default: false,
    },
    relationPlaceholder: {
      type: String,
      default: '',
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    onlyNativeEvent: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }){
    const { disabledDate, field } = toRefs(props)
    const datePickerOption = computed(() => ({
      disabledDate,
    }));
    const bindTime = ref(null)
    watchEffect(() => {
      bindTime.value = props.value ? getTimestamp(props.value) : null
    })

    /**
     * @description 匹配日期格式
     * 若设置了日期格式返回匹配数据
     * 否择返回默认设置，兼容老数据
     */
    const dateObj = computed(() => {
      const setting = unref(field).setting || {};
      let dateTypeObj = pickerOption.find(item => item.format == setting.dateType);
      return dateTypeObj || { type: 'date', format: 'yyyy-MM-dd' };
    });
    
    const isDateHour = computed(() => {
      const setting = unref(field).setting || {};
      return Boolean(setting.isDateHour);
    })
    
    const formDatePickerClassName = computed(() => {
      return isDateHour.value ? 'form-date-hour-picker' : '';
    })

    function choose(newValue) {
      const {value: oldValue, field} = props
      const upData = {
        newValue,
        oldValue,
        field
      }

      emit('update', upData);
      emit('input', newValue);
    }

    const handleInput = (v)=> {
      if(props.onlyNativeEvent) return emit('nativeInput', v);
      choose(v)
    }

    const handleConfirm = (v)=> {
      if(props.onlyNativeEvent) return emit('nativeConfirm', v);
      choose(v)
    }
    return {
      datePickerOption,
      dateObj,
      bindTime,
      choose,
      handleInput,
      handleConfirm,
      formDatePickerClassName
    }
  },
  computed: {
    dateTimeType() {
      return this.dateObj?.type
    },
    /** 
     * @description 是否显示时间选择器 - 时分秒/时分
     */
    isTimeType() {
      return this.dateTimeType == 'time';
    }
  }
});
</script>

<style lang="scss">
.form-date-content {
  flex: 1;
  display: flex;
  align-items: center;

  .el-input__inner {
    cursor: pointer;

    &:hover {
      border-color: $color-primary;
    }
  }

  .el-date-editor {
    width: 100%;
  }

  .form-date__timezone-cascader {
    margin-left: 12px;
    min-width: 150px;
  }
}

.form-date-hour-picker {
  .el-time-spinner {
    .el-time-spinner__wrapper {
      &:nth-of-type(2) {
        .el-scrollbar__wrap {
          overflow: hidden;
        }
        .el-time-spinner__item  {
          display: none;
        }
        .el-time-spinner__item.active {
          display: block;
        }
      }
    }
  }
}
</style>
